<template>
  <a-menu v-model="menuKey" mode="horizontal" @click="menuClick">
    <template v-for="item in $globalSite.topMenu">
      <a-sub-menu v-if="item.children" :key="item.name">
        <span slot="title"
          >{{ item.title }}
          <c-icon type="xia" size="14" :styles="{ margin: 0 }" />
        </span>
        <a-menu-item v-for="subItem in item.children" :key="subItem.name">
          {{ subItem.title }}
        </a-menu-item>
      </a-sub-menu>
      <a-menu-item :key="item.name" v-else-if="!item.hidden">{{
        item.title
      }}</a-menu-item>
    </template>
  </a-menu>
</template>

<script>
export default {
  data() {
    return {
      menuKey: [],
      defaultkey: []
    };
  },
  watch: {
    $route() {
      this.getMenuKey();
    }
  },
  methods: {
    // 获取选中的顶部菜单
    getMenuKey() {
      // // 遍历所有name
      // function queryMenuName(data) {
      //   let names = [];
      //   data.forEach(item => {
      //     names.push(item.name);
      //     if (item.children) {
      //       names = names.concat(queryMenuName(item.children));
      //     }
      //   });
      //   return names;
      // }
      let names = this.queryMenuName(this.$globalSite.topMenu);
      this.menuKey =
        names.indexOf(this.$route.name) === -1 ? [] : [this.$route.name];
    },
    // 遍历所有菜单name
    queryMenuName(data) {
      let names = [];
      data.forEach(item => {
        names.push(item.name);
        if (item.children) {
          names = names.concat(this.queryMenuName(item.children));
        }
      });
      return names;
    },
    menuClick({ key }) {
      this.$router.push({ name: key });
    }
  },
  mounted() {
    this.getMenuKey();
  }
};
</script>

<style lang="scss" scoped>
.ant-menu-horizontal {
  border-bottom: 0;
  line-height: 39px;
}
.ant-menu-horizontal > .ant-menu-item,
.ant-menu-horizontal > .ant-menu-submenu {
  top: 0;
}
</style>
